<template>
  <div class="login">
    <!-- <div class="loginTitle">智慧环卫系统</div> -->
    <!-- <div class="loginTitle">远航环卫作业公司智慧环卫平台</div> -->
    <div class="loginTitle">福泉环卫一体化作业智慧环卫监管平台</div>
    <!-- <div class="loginTitle">东丽区环卫一体化作业智慧环卫监管平台</div> -->
    <!-- <div class="loginTitle">垃圾分类管理信息系统</div> -->
    <!-- <div class="loginTitle">成华区环卫一体化作业智慧环卫监管平台</div> -->
    <div class="loginTitle2">——————————————</div>
    <!-- <div class="loginTitle2">——————— 技术支持 : 联合远航 ———————</div> -->
    <!-- <div style="font-weight:bold;color:#fff;margin-left:30px; z-index: 2;">
          <p>技术支持</p>
          <p>联合远航</p>
        </div> -->
    <!-- <div class="loginTitle">赣州环卫一体化作业智慧环卫监管平台</div> -->
    <!-- <div class="loginTitle">佳好佳智慧环卫平台</div> -->
    <!-- <img src="../../assets/img/login.jpg" alt /> -->
    <div class="wrap" id="wrap">
      <div class="logGet">
        <!-- 头部提示信息 -->
        <div class="logD logDtip">
          <p class="p1">登录</p>
        </div>
        <!-- 输入框 -->
        <div class="lgD">
          <!-- <img src="../../assets/img/login_User.png" width="20" height="20" alt /> -->
          <!-- <input type="text" id="loginUsername" placeholder="输入用户名" /> -->
          <el-input
            class="logGet_input"
            placeholder="请输入用户名"
            v-model="ruleForm.name"
            clearable
          ></el-input>
        </div>
        <div class="lgD">
          <!-- <img src="../../assets/img/login_Password.png" width="20" height="20" alt /> -->
          <!-- <input type="password" id="loginPassword" placeholder="输入用户密码" /> -->
          <el-input
            class="logGet_input"
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.passwords"
            show-password
          ></el-input>
        </div>
        <div class="logC">
          <el-button
            type="primary"
            @click="loginAction('ruleForm')"
            @keyup.enter="loginAction('ruleForm')"
            class="submits"
            >登录</el-button
          >
        </div>
      </div>
    </div>
    <!-- <div class="logGet">
      <h2>账号登录</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="name">
          <el-input placeholder="请输入内容" v-model="ruleForm.name" clearable></el-input>
         
        </el-form-item>
        <el-form-item label="密码" prop="passwords">
          <el-input type="password" placeholder="请输入密码" v-model="ruleForm.passwords" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="loginAction('ruleForm')"
            @keyup.enter="loginAction('ruleForm')"
            class="submits"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>-->
  </div>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        passwords: ''
      },
      rules: {
        name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        passwords: [{ required: true, validator: validatePass, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },

  // created () {
  //   console.log(this.ruleForm)
  // },
  // mounted () {
  //   var url = window.location.href;
  //   console.log(url)
  //   var url = window.location.href; //获取url中"?"符后的字串       
  //   var dataTag = url.split('?')[1];                //获取?之后的参数字符串
  //   //?之后第一个字符串标识哪个数据库
  //   switch (dataTag) {
  //     case 'bdezs':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:9929/CompanyapiBDEapi/' //作业公司-博德尔正式库
  //       break;
  //     case 'bdeceshi':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:5565/CompanyapiBDEapi/' //作业公司-博德尔测试库
  //       break;
  //     case 'bdenw':
  //       this.$axios.defaults.baseURL = 'http://192.168.1.4:5565/CompanyapiBDEapi/' //作业公司-博德尔测试库
  //       break;
  //     case 'fj':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:9944/CompanyapiFJapi/' //作业公司-福建
  //       break;
  //     case 'dc':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:9932/CompanyapiDC/' //作业公司-大厂
  //       break;
  //     case 'yx':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:9931/CompanyapiYX/' //作业公司-应县
  //       break;
  //     case 'srw':
  //       this.$axios.defaults.baseURL = 'http://111.160.78.62:9930/Cityscapeapi/' //市容委
  //       break;
  //     default:
  //       break;
  //   }
  // },

  mounted () {
    //http://localhost:8080/#/order/Payresult?orderCode=20200721093517378188743943022
    var url = window.location.href; //获取url中"?"符后的字串       
    if (url.includes('?')) {
          var cs = url.split('?')[1];                //获取?之后的参数字符串
          
    //alert(url+'地址');//orderCode=20200721093517378188743943022
    var cc = '';
    var cs2 = '';
    if (cs.length > 0) {
      cs = cs.replace('orderId=', '');
      var cc = cs.split('&')[1];//获取orderid
      var cs1 = cs.split('&')[0];//ocd=20200818103843816416953617735
      var cs2 = cs1.replace('ocd=', '');//20200818103843816416953617735

      this.submitForm(cc, cs2)
    }

    }

  },
  methods: {
    loginAction () {
      // this.ruleForm.name = document.getElementById("loginUsername").value;
      // this.ruleForm.passwords = document.getElementById("loginPassword").value;
      this.submitForm(this.ruleForm.name, this.ruleForm.passwords)
    },
    async submitForm (idLOGIN, pwLOGIN) {

      localStorage.setItem('LOGIN_NAME', idLOGIN)
      var url = 'Role/Login?userName=' + idLOGIN + '&password=' + pwLOGIN
      // var url = 'Role/GetLoginInfoNew?UserID=' + idLOGIN + '&Password=' + pwLOGIN + '&Nation=' + localStorage.getItem('Nation')
      //   + '&Privince=' + localStorage.getItem('Privince') + '&City=' + localStorage.getItem('City') + '&District='
      //   + localStorage.getItem('District')
      let { data } = await this.$Http.get(url)
      if (data.length > 0) {
        localStorage.setItem('CLIENT_NO_LOGIN', data[0].CLIENT_NO)
        // localStorage.setItem('USERNAME_LOGIN', data[0].USERNAME)
        localStorage.setItem('CLIENT_NO', data[0].CLIENT_NO)
        localStorage.setItem('USERNAME', data[0].USERNAME)
        localStorage.setItem('REMARK', data[0].REMARK)
        localStorage.setItem('CTYPE', data[0].CTYPE)
          localStorage.setItem('LNG', '107.485')
          localStorage.setItem('LAT', '26.796')
       
        console.log(localStorage.getItem('LNG'))
        console.log(localStorage.getItem('LAT'))
        // localStorage.setItem('PWD', data[0].PWD),39.092332
        // 获得视频登陆信息
        this.getLoginVideoInfo()
        this.$router.push({
          path: '/systemMenu'
        })
        this.$message({ // 提示成功信息
          type: 'success',
          message: '登录成功'
        })
      } else {
        this.$message({ // 提示失败信息
          type: 'error',
          message: '用户名或密码错误!'
        })
      }
    },
    // 获得视频登陆信息
    async getLoginVideoInfo () {
      var url = 'Vehicle/GetVideoLoginInfo?ClientNo=' + localStorage.getItem('LOGIN_NAME')
      let { data } = await this.$Http.get(url)
      console.log('视频登陆信息')
      console.log(data)
      if (data.length > 0) {
        localStorage.setItem('VIDEO_UID', data[0].用户名)
        localStorage.setItem('VIDEO_PWD', data[0].密码)
        localStorage.setItem('VIDEO_devIdno', data[0].设备号)
      } else {
        localStorage.setItem('VIDEO_UID', '0')
      }
    }
  }
}
</script>
<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
}
.loginTitle {
  /* margin: 1em 0 0.5em 0; */
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #007acc;
  /* font-style: italic; */
  /* font-family: 'Josefin Sans', sans-serif; */
  font-size: 45px;
  line-height: 54px;
  /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 10%;
  width: 100%;
  height: 10%px;
  position: absolute;
  z-index: 2;
}
.loginTitle2 {
  /* margin: 1em 0 0.5em 0; */
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #007acc;
  /* font-style: italic; */
  /* font-family: 'Josefin Sans', sans-serif; */
  font-size: 25px;
  line-height: 54px;
  /* text-shadow: 2px 5px 0 rgba(0,0,0,0.2); */
  text-align: center;
  top: 17%;
  width: 100%;
  height: 10%px;
  position: absolute;
  z-index: 2;
}
.login img {
  /* width: 100%;
  height: 100%; */
  position: relative;
}
.loginin h2 {
  padding: 0 0 15px 0;
  color: #26b4ea;
}
.loginin {
  width: 350px;
  height: auto;
  border: 1px solid #b9b9b9;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 10px -10px 10px #888888;
  padding-right: 60px;
  position: absolute;
  top: 40%;
  left: 55%;
}
.submits {
  width: 100%;
}
#wrap {
  width: 100%;
  height: 1080px;
  background-image: url(../../assets/img/login2.jpg);
  /*
	height: 719px;
	width: 100;
	background-image: url(images/loginBackground.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;*/
  position: relative;
}
#head {
  height: 120px;
  width: 100;
  background-color: #c6eef5;
  text-align: center;
  position: relative;
}
#foot {
  width: 100;
  height: 126px;
  background-color: #cc9933;
  position: relative;
}
#wrap .logGet {
  height: 408px;
  width: 368px;
  position: absolute;
  background-color: #ffffff;
  top: 30%;
  right: 15%;
}
.logC a button {
  width: 100%;
  height: 45px;
  background-color: #64d0e2;
  border: none;
  color: white;
  font-size: 18px;
}
.logGet .logD.logDtip .p1 {
  display: inline-block;
  font-size: 28px;
  margin-top: 30px;
  width: 86%;
}
#wrap .logGet .logD.logDtip {
  width: 86%;
  border-bottom: 1px solid #64d0e2;
  margin-bottom: 0px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
}
.logGet .lgD img {
  position: absolute;
  top: 12px;
  left: 8px;
}
/deep/.el-input__inner {
  /* width: 100%; */
  height: 42px !important;
  border-color: #dcdfe6;
  padding-left: 15px;
  /* text-indent: 2.5rem; */
}
/deep/.el-input__icon {
  line-height: 42px;
}
#wrap .logGet .lgD {
  width: 86%;
  position: relative;
  margin-bottom: 30px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
}
#wrap .logGet .logC {
  width: 86%;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.title {
  font-weight: bold;
  color: #007c95;
  font-size: 45px;
  /*position: absolute;
    font-size: 36px;
	height: 40px;
	width: 30%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);   使用css3的transform来实现 */
  padding-top: 30px;
  white-space: nowrap;
}

.copyright {
  font-family: '宋体';
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
  height: 60px;
  width: 40%;
  text-align: center;
}

#foot .copyright .img {
  width: 100%;
  height: 24px;
  position: relative;
}
.copyright .img .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

.copyright .img .icon1 {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-image: url(%E5%9C%B0%E5%9D%80.png);
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
.copyright .img .icon2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 22px;
  vertical-align: middle;
  background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
#foot .copyright p {
  height: 24px;
  width: 100%;
}
</style>
